<!--
 * @Date: 2023-10-18 14:56:15
 * @LastEditTime: 2024-03-01 20:39:26
-->
<template>
    <header class="fix-header">
        <div class="navbar navbar-default navbar-static-top yamm sticky fix-header p50" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="static/imgs/logo.png" class="img-responsive"
                            alt="logo-电子管理软件"></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right no-margin">
                        <li class="dropdown" :class="activeName == 'home' ? 'selected': ''"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="nav_1" @click="goUrl('home')">
                        首页
                        </a>
                        </li>
                        <li class="dropdown" :class="['gyxe','xinwen', 'industryDynamics', 'industryDetail'].includes(activeName) ? 'selected': ''">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                                id="nav_2">关于企明星</a>
                            <ul class="dropdown-menu">
                                <li><router-link to="gyxe">简介</router-link></li>
                                <li><router-link to="xinWen">新闻中心</router-link></li>
                                <li><router-link to="industryDynamics">行业动态</router-link></li>
                                <li><router-link to="jmhz">加盟合作</router-link></li>
                            </ul>
                        </li>
                        <li class="dropdown" :class="['danganFa'].includes(activeName) ? 'selected': ''"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
                                role="button" aria-haspopup="true" aria-expanded="false" id="nav_3">方案中心</a>
                            <ul class="dropdown-menu" style="left: -85px; width: 290px;">
                                <i><em></em></i>
                                <li><router-link to="danganFa">数字档案馆（室）整理解决档案
                                    </router-link></li>
                            </ul>
                        </li>
                        <li class="dropdown" :class="['dzXt', 'twXt', 'mzXt','dzgPt','gbXt', 'ccXt'].includes(activeName) ? 'selected': ''"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
                                role="button" aria-haspopup="true" aria-expanded="false" id="nav_3">产品中心</a>
                            <ul class="dropdown-menu">
                                <i><em></em></i>
                                <li><router-link to="dzXt">企业电子档案管理系统</router-link></li>
                                <li><router-link to="twXt">退伍军人档案管理系统</router-link></li>
                                <li><router-link to="mzXt">民政人事档案管理系统</router-link></li>
                                <li><router-link to="dzgPt">档案馆智能化综合管理平台</router-link></li>
                                <li><router-link to="gbXt">干部人事档案管理系统</router-link></li>
                                <li><router-link to="ccXt">馆藏资源档案管理系统</router-link></li>
                                <li><router-link to="daszh">档案数字化加工系统</router-link></li>
                                <li><router-link to="media">影音档案管理系统</router-link></li>
                                <!-- <li><router-link to="daszh">档案数字化加工系统</router-link></li> -->
                            </ul>
                        </li>
                        <li class="dropdown">
                            <div style="color: #0F47C9;font-size: 18px;    letter-spacing: 18px;padding-left: 14px;">合作联系</div>
                            <div style="display: flex;align-items: center;    margin-top: -5px;">
                                <img src="static/imgs/phone.png" class="contract" style="">
                                <div style="color: #0F47C9;font-size: 14px;">
                                    <div>15896592799</div>
                                    <div>15896592899</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
        </div>
        
    </header>
</template>

<script>
    import 'assets/global/scripts/index.js'
    export default {
        name: "Header",
        watch: {
            $route: {
                handler(router) {
                    this.activeName = router.name;
                    this.scrollToTop();
                },
                immediate: true,
            },
        },
        data() {
            let that = this;
            return {
                activeName: "home",
            };
        },
        mounted() {
            this.$nextTick(() => {
                this.loadSuccess();
            });
        },
        methods: {
            goUrl(url) {
                this.$router.push(url)
            },
            scrollToTop(){
                this.$nextTick(()=>{
                    document.body.scrollTop=document.documentElement.scrollTop=0;
                    $('.navbar-collapse').removeClass('in').attr("aria-expanded","false")
                    $('.navbar-toggle').addClass('collapsed')
                })
            },
            loadSuccess() {
                var href = window.location.href;
                if (isMobilePhone()) {
                    $(".fix-header .navbar-collapse .navbar-nav > li:not(:first) > a").attr(
                        "href",
                        "javascript:;"
                    );
                    $(
                        ".fix-header .navbar-collapse .navbar-nav > li:not(:first)"
                    ).removeClass("dropdown");
                    $(
                        ".fix-header .navbar-collapse .navbar-nav > li:not(:first) > a"
                    ).removeAttr("target");
                    $(".fix-header .navbar-collapse .navbar-nav > li:not(:first) > a").on(
                        "click",
                        function () {
                            $(this).parent().siblings().removeClass("open");
                            $(this).parent().addClass("open");
                        }
                    );
                }
                $(".dropdown .dropdown-toggle").each(function () {
                    if (
                        href.search($(this).attr("href")) != -1 &&
                        $(this).attr("href") != ""
                    ) {
                        $(this).addClass("selected");
                        $(this).addClass("test");
                    }
                    if (href.search("zxnszwxq") != -1 && $(this).attr("href") != "") {
                        $("#nav_2").addClass("selected");
                        $("#nav_2").addClass("test");
                    }
                    if (href.search("newslist") != -1 && $(this).attr("href") != "") {
                        $("#nav_6").addClass("selected");
                        $("#nav_6").addClass("test");
                    }
                    if (href.search("caselist") != -1 && $(this).attr("href") != "") {
                        $("#nav_4").addClass("selected");
                        $("#nav_4").addClass("test");
                    }
                });
                function isMobilePhone() {
                    if (
                        navigator.userAgent.match(
                            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                        )
                    ) {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
        }
    };
</script>
<style lang="less" scoped>
    .header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 9;
    }
</style>